import React, { useState, useEffect } from 'react'
import { Table, Checkbox } from 'antd'
import { getCartlist } from '../../api/cart'

const Cartlist = () => {
  
  const [cartlist, setCartlist] = useState([])

  useEffect(()=> {
    async function fetchData() {
      const res = await getCartlist()
      setCartlist(res.data.data)
    } 
    fetchData()
  },[])

  const columns = [
    {
      title: '序号',
      align: 'center',
      render: (text, record, index) =>(
        <span>{index + 1}</span>
      )
    },
    {
      title: '选中状态',
      dataIndex: 'flag',
      key: 'flag',
      align: 'center',
      render: (text, record, index) => (
        <Checkbox checked={text} />
      )
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      align: 'center'
    },
    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',
      align: 'center'
    },
    {
      title: '产品名称',
      dataIndex: 'proname',
      width: 200,
      key: 'proname',
      align: 'center',
    },
    {
      title: '产品图片',
      dataIndex: 'proimg',
      align: 'center',
      render: (text, record, index) => {
        return (<img src={text} alt="" style={{ width:80, height:80}}/>)
      }
    },
    {
      title: '价格',
      dataIndex: 'price',
      key: 'price',
      align: 'center'
    },
    {
      title: '数量',
      dataIndex: 'num',
      key: 'num',
      align: 'center'
    }
  ]

  return (
    <Table dataSource={cartlist} columns={columns} rowKey={(record) => record.cartid}></Table>
  )
}

export default Cartlist
